import { useState } from 'react'
import './XiaoXiZhongXin.css'
import XiaoXiTop from './TopXiaoX/XiaoXiTop'
import XiaoXiZhongX from './XiaoXiZz/XiaoXiZhongX'
function MessageCenter() {
  const [activeIndex, setActiveIndex] = useState(0);
  const handleTabClick = (index: number) => {
    setActiveIndex(index);
  }
  const tabList = [
    { name: '全部消息', content: <XiaoXiZhongX></XiaoXiZhongX> },
    { name: '站内通知', content: <XiaoXiTop></XiaoXiTop> },
    { name: '优惠促销', content: '优惠促销' },
    { name: '活动福利', content: '活动福利' },
    { name: '素材上新', content: '素材上新' },
  ];
  return (
    <div className='messageCenter_container'>
      <div className="messageCenter_container_left">
        <ul>
          {
            tabList.map((tab, index) => (
              <li key={index} onClick={() => handleTabClick(index)}
                className={activeIndex === index ? 'active' : ''}>
                {tab.name}
              </li>
            ))
          }
        </ul>
        <div className="messageCenter_container_left_administration ">
          <p className='sp1'>全部已读</p>
          <p className='sp1'>批量管理</p>
        </div>
      </div>
      <div className="messageCenter_container_center">

      </div>
      <div className="messageCenter_container_right">
        {tabList[activeIndex] && <div>{tabList[activeIndex].content}</div>}
      </div>
    </div>
  )
}

export default MessageCenter;